<template>
  <div class="movies">
    <ul>
      <li
        v-for="(item, index) in moviesList"
        :key="index"
        @click="goToDetail(item.movieid)"
      >
        <div class="lefImg">
          <img :src="item.img | formatUrl" alt="" />
        </div>
        <div class="rigContent">
          <h3>{{ item.nm }}</h3>
          <p v-if="item.sc === 0">
            <span>{{ item.wish }}</span
            >人想看
          </p>
          <p v-if="item.sc !== 0">
            观众评 <span>{{ item.sc }}</span>
          </p>
          <p class="star">主演:{{ item.star }}</p>
          <p>{{ item.showInfo }}</p>
        </div>
        <div class="button purchase" v-if="item.showst === 3">购票</div>
        <div class="button preSale" v-if="item.showst === 4">预售</div>
      </li>
    </ul>
  </div>
</template>

<script>
// import http from "@/utils/http";
import { moviesApi, moviesMoreApi } from "@/utils/api";
export default {
  data() {
    return {
      moviesList: [],
      // 一共有几条数据
      count: 0,
      // 每次想新增几条数据
      size: 6,
      // 所有电影的id的数组
      ids: [],
      // 从第几项开始截取
      startIndex: 0,
    };
  },

  mounted() {
    this.getMovies();
  },

  methods: {
    async getMovies() {
      const res = await moviesApi();
      this.moviesList = res.result;
      this.count = res.count;
      this.ids = res.ids;
      this.startIndex = res.result.length;

      // 子组件触发父组件事件
      await this.$nextTick();
      this.$emit("addbs");
    },
    // 请求更多数据
    async addMore() {
      // console.log("addMore");
      const arr = this.ids.slice(this.startIndex, this.startIndex + this.size);
      // console.log(arr);
      const str = arr.join(",");

      const res = await moviesMoreApi({
        ids: str,
      });
      // console.log(res);
      // 将请求到的更多的数据拼接到原数据上面
      this.moviesList = [...this.moviesList, ...res.result];
      // 12 -> 18 -> 24
      this.startIndex += this.size;

      // 等待渲染结束
      await this.$nextTick();
      // this.moviesList.length >= this.count true 表示所有的数据都加载了
      this.$emit("finish", this.moviesList.length >= this.count);
    },

    goToDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },

  filters: {
    formatUrl(val) {
      return val.replace("/w.h", "");
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../assets/css/var.less";
.movies {
  width: 100%;
  background-color: @white-color;
  ul {
    width: 100%;
    li {
      width: 100%;
      height: 114px;
      padding-left: 15px;
      display: flex;
      position: relative;
      .lefImg {
        width: 64px;
        height: 95px;
        margin-top: 12px;
        background-color: pink;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .rigContent {
        width: 286px;
        height: 114px;
        padding: 12px 14px 12px 0px;
        margin-left: 10px;
        border-bottom: 1px solid @border-color;
        h3 {
          width: 173px;
          height: 24px;
          .ell();
          font-size: @l-font;
          color: #333;
          font-weight: 900;
          margin-bottom: 5px;
        }
        p {
          font-size: @s-font;
          line-height: 20px;
          span {
            color: @score-color;
            font-weight: bold;
          }
        }
        .star {
          width: 219px;
          .ell();
        }
      }
      .button {
        width: 54px;
        height: 28px;
        border-radius: 14px;
        position: absolute;
        top: 50%;
        margin-top: -14px;
        right: 10px;
        font-size: @s-font;
        color: @white-color;
        .center();
      }
      .preSale {
        background-color: @theme-color;
      }
      .purchase {
        background-color: #3c9fe6;
      }
    }
  }
}
</style>
